
page{
	background-color: #F0F9FE;;
}

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
.chart {
  width: 180px;
  height: 180px;
/*  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05); */
}
.legend {
	display: flex;
  flex-direction: column;
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.effect_t{
	font-weight: bold;
	font-size: 28rpx;
	color: rgba(0,0,0,0.9);
	/* line-height: 48rpx; */
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #333;
}
.dot {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  margin-right: 6px;
}

.class_h{
	display: flex;
	flex-direction: column;
	background-size: 100% 100%;
	padding-bottom: 190rpx;
	position: relative;
	z-index: 99999
}
.containersss {
  position: relative;
 width: 150rpx;
 height: 150rpx;
}
	
	.mine__bg--avatar{
		 position: relative; /* 或 absolute 定位到想要的位置 */
		  z-index: 2; /* 确保头像在背景上方可点击 */
	  width: 150rpx;
	  height: 150rpx;
	 /* border: 5rpx solid #FFFFFF; */
	  border-radius: 50%;
	z-index: 2; /* 确保头像在背景上方可点击 */
	}
	.member-bg {
		width: 150rpx;
		height: 150rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1111; /* 背景层在底部 */
		background-size: cover;
		background-position: center;
	}
	
	.mine__bg{ 
	
		height: 480rpx;
		background-size: 100% 100%;
	}	
.top{
	position: fixed;
	padding-top: 110rpx;
	font-weight: 600;
	font-size: 38rpx;
	color: #333333;
	line-height: 49rpx;
	 left: 30rpx
}
.task_name{
   position: fixed;
    top: 110rpx;       /* 顶部距离 */
    left: 50%;         /* 左边从屏幕中间开始 */
    transform: translateX(-50%); /* 水平居中 */
    font-weight: 600;
    font-size: 38rpx;
    color: #333333;
    line-height: 49rpx;
    text-align: center; /* 内容居中 */
}

.content_one{
	display: flex;
	flex-direction: column;
	margin-left: 22rpx;
	margin-right: 22rpx;
	margin-top: 20rpx;
	background-color: #fff;
	border-radius: 16rpx;
}

.content_two{
	display: flex;
	flex-direction: column;
	margin-left: 22rpx;
	margin-right: 22rpx;
	margin-top: 20rpx;
	background-color: #fff;
	border-radius: 16rpx;
}

.report{
	display: flex;
	width: 180rpx;
	height: 180rpx;
	border-radius: 16rpx;
	background-color: #1EC157;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #FFFFFF;
}

.health{
	display: flex;
	flex-direction: column;
	width: 30%;
	    margin: 10rpx;
	background-color: #ECF0F6;
	border-radius: 16rpx;
	
}

.healths{
	display: flex;
	flex-direction: column;
	width: 47%;
	    margin: 10rpx;
	background-color: #ECF0F6;
	border-radius: 16rpx;
	
}
.h_name{
	color: #999999;
	margin-top: 25rpx;
	margin-left: 25rpx;
	font-size: 28rpx;
}
.h_text{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #333333;
	margin-top: 25rpx;
	font-size: 40rpx;
}

 .progress-wrap {
   width: 100%;
   padding: 20rpx;
   box-sizing: border-box;
 }
 
 /* 灰色底层 */
 .progress-bg {
   width: 100%;
   height: 40rpx;
   background-color: #d9d9d9;
   border-radius: 40rpx;
   overflow: hidden;
   position: relative;
 }
 
 /* 绿色进度条 */
 .progress-bar {
   height: 100%;
   background-color: #1EC157;
   border-radius: 40rpx;
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: flex-end; /* 让文字靠右 */
   padding-right: 16rpx;
   transition: width 0.4s;
 }
 
 /* 白色斜线背景（条纹） */
 .progress-bar::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 200%;
   height: 100%;
   background-image: repeating-linear-gradient(
     45deg,
     rgba(255, 255, 255, 0.25) 0,
     rgba(255, 255, 255, 0.25) 10rpx,
     transparent 10rpx,
     transparent 20rpx
   );
   animation: stripe-move 2s linear infinite;
 }
 
 /* 条纹动效 */
 @keyframes stripe-move {
   from {
     transform: translateX(0);
   }
   to {
     transform: translateX(-20rpx);
   }
 }
 
 /* 数字样式 */
 .progress-text {
   color: #ffffff;
   font-size: 24rpx;
   font-weight: bold;
   z-index: 2; /* 确保文字在斜线之上 */
 }
 

 .health_task{
 	display: flex;
 	flex-direction: column;
 	width: 305rpx;
 /* 	height: 158rpx; */
 	background-color: #ECF0F6;
 	border-radius: 16rpx;
 	
 }